<template>
    <div>
        <h1 class="login-text">
            能科瑞元后台管理
        </h1>

        <div class="login-view">
            <div style="width:360px;">
                <kv label="用户名">
                    <el-input v-model.trim="loginInfo.loginName" placeholder="请输入用户名" chk="*"></el-input>
                </kv>
                <kv label="密码">
                    <el-input type="password" v-model.trim="loginInfo.password" placeholder="请输入密码" chk="*"></el-input>
                </kv>
                <kv label="验证码">
                    <div style="display: flex">
                        <el-input v-model.trim="loginInfo.validateCode" placeholder="请输入验证码" chk="*"></el-input>
                        <img class="validate-img" id="validateCodeImage" style="width:200px;margin-left:5px;"
                            :src="loginInfo.validateImg" @click="img_click" />
                    </div>
                </kv>
                <div class="login-btn">
                    <el-button type="primary" @click="login()" style="padding:6px 24px;">登录
                    </el-button>
                </div>
            </div>
        </div>

        <div class="txt-bal">
            Copyright © 2021 能科科技股份有限公司
        </div>
    </div>
</template>


<style lang="scss" scoped>
    .login-btn {
        margin-top: 10px;
        text-align: center;
    }

    .login-text {
        width: 100%;
        text-align: center;
        top: 130px;
        position: fixed;
        font-size: 24px;
        font-weight: normal;
        color: darkblue;
    }

    .login-view {
        background-image: url("../assets/login_input.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 20px 160px 20px 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .txt-bal {
        position: fixed;
        bottom: 100px;
        width: 100%;
        text-align: center;
    }
</style>